<template>
  <dialogBase v-if="show" :title="title" @ok="submit" @close="close">
    <main class="assignInterview">
      <div
        class="card"
        v-for="people of dialogData"
        @click="switchCard(people.id)"
        :class="{ chosen: people.id === chosenInterviewer }"
        :key="people.id">
        <div class="row">{{ getDate(people.date) }}</div>
        <div class="row">{{ people.name }}</div>
      </div>
    </main>
  </dialogBase>
</template>

<script>
import dialogBase from '@/components/Dialogs/base/dialogBase';

export default{
  props: ['dialogData', 'show', 'title'],
  data() {
    const defaultObj = {
      chosenInterviewer: null,
    };
    return defaultObj;
  },
  methods: {
    getDate(dateStr) {
      // eslint-disable-next-line prefer-const
      let [date, time] = dateStr.split(' ');
      time = time.split(':').splice(0, 2).join(':');
      return `${date} ${time}`;
    },
    getStrLen(str) {
      // return str.replace(/[\u0391-\uFFE5]/g, 'xx').length;
      return str.length;
    },
    close() {
      this.$emit('close', false);
    },
    submit() {
      this.$emit('done', this.chosenInterviewer);
    },
    switchCard(id) {
      this.chosenInterviewer = id;
    },
  },
  components: {
    dialogBase,
  },
};
</script>
<style lang="less">
@import url(../../../static/style/site.vars.less);
  .assignInterview{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: flex-start;
    width: 60%;
    margin: 40px auto;
    &>.card {
      box-sizing: border-box;
      margin: 10px;
      width: 44%;
      height: 88px;
      border: 1px rgb(224, 224, 224) solid;
      padding: 15px;
      padding-top: 23px;
      user-select: none;
      cursor: pointer;
      transition: all .1s linear;
      &.chosen {
        color: rgb(23, 116, 223);
        border-color: rgb(78, 138, 207);
        box-shadow: 0 0 2px rgb(78, 138, 207);
      }
      .row {
        display: flex;
        justify-content: left;
        align-items: center;
      }
    }
  }
</style>
